import React from 'react';
import { Modal, Input, Form, Button } from 'antd';
import { useSelector } from 'react-redux';
import { UserOutlined, LockOutlined } from '@ant-design/icons'

const LoginModal = ({ handleOk, handleClose }) => {
  const open = useSelector(store => store.main.showLoginModal)
  return (
    <Modal
      title=""
      open={open}
      onCancel={handleClose}
      className='custom-notitle-modal'
      footer={
        <Button type="primary" className='custom-btn-primary' onClick={handleOk}>
          登录
        </Button>
      }
      width={350}
      maskClosable={false}
    >
      <Form
        name="login_form"
        onFinish={handleOk}
        className='custom-form-primary'
      >
        <Form.Item
          name="username"
          rules={[{ required: true, message: '请输入用户名!' }]}
        >
          <Input id='username' prefix={
            <UserOutlined style={{ color: '#4e5969' }} />} type="text" placeholder="用户名" />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[{ required: true, message: '请输入密码!' }]}
        >
          <Input.Password
            prefix={
              <LockOutlined style={{ color: '#4e5969' }} />
            }
            placeholder="密码" />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default LoginModal;
